<template>
	<view>

		<view class="fullscreen-bg">
			<!-- 在这里放置你的其他内容（会覆盖在背景图上） -->
			<view style="margin: 26rpx;">
				<view class="user-top">
					<view style="display: flex;align-items: center;justify-content: center;width:60%;">
						<image src="/static/my/dq.png" mode="aspectFill"
							style="width: 40px;height: 40px;margin: 0 11px;"></image>
						<text
							style="margin-left: 15rpx;display: block;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;width: 70%;">
							{{username}}</text>
					</view>
					<view>
						<!-- <image src="/static/my/tz.png" mode="aspectFill" -->
							<!-- style="width: 20px;height: 17px;margin: 0 11px;"></image> -->
						<view class="hamburger" @click="toggle">
							<view :class="active == 'active' ? 'active':''"></view>
							  <svg viewBox="0 0 32 32">
							    <path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
							    <path class="line" d="M7 16 27 16"></path>
							  </svg>
							</view>
					
							<uni-popup ref="popup" :mask-click="false">
								<view class="content-popup">
									
									
									<view class="contens">
										<view class="content-header">
											<view>
												<img src="@/static/home/game.png" alt="">
												<view class="header-name">
													<view>共创社区</view>
													<view>Gc</view>
												</view>
											</view>
										
										</view>
										
										<view class="tab-lists">
											<view class="tab-list" v-for="(item,index) in tabList" 
											:key="index"
											@click="btnList(item)"
											>
												<view>
													<img :src="item.img" width="30" height="30" alt="">
												    <text class="tba-name">{{item.text}}</text>
												</view>
												<view><img src="@/static/home/xia.png" alt="" /></view>
											</view>
											
										</view>
									</view>
									<view class="popupFooter">
										<img src="@/static/home/dt.png" alt="" />
										<img src="@/static/home/gb.png" alt="" />
										<img src="@/static/home/yx.png" alt="" />
									</view>
								</view>
							<!-- 	<button @click="close">关闭</button> -->
							</uni-popup>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<view class="content">
				<uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
							<uni-notice-bar 
							 color="#fff"
							show-icon 
							    scrollable

							
							  icon-color="#fff" 
								:text="notice" />
						</uni-section>
				<!-- <view class="title-area">
					<view><img class="imgs" src="/static/home/speaker.png" alt=""> </view>
					<view style="margin-left: 26rpx;">{{notice}}</view>
					
				</view> -->
				<view>
					<swiper class="swiper-box" >
						<swiper-item v-for="(item, index) in bannerList" :key="index">
							<view class="swiper-item" :class="'swiper-item' + index">
								<img class="banner-img" :src="item.img" alt="">
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="family-area">
					<view style="font-size: 20px;">玩家排行榜</view>
					<view class="more" @click="btnMore">更多</view>
				</view>
				<view class="tab-area">
					<swiper class="swiper-box2"  :next-margin="'120px'">
						<swiper-item v-for="(item, index) in rankDate" :key="index" style="width: 200rpx !important;  /* 每个 item 宽度（控制可见的部分） */
							margin-right: 10px;  ">
							<view class="tab-input">
								<view class="tab-number">{{index + 1}}</view>
								
									<img class="input-img" :src="item.avatar || ''" alt="">
							
								<view style="margin-left: 24rpx;">
									<view>{{item.nickname}}</view>
									<view style="color: rgb(185, 185, 185);">{{item.totalAmount}}</view>
								</view>
							</view>

						</swiper-item>
					</swiper>


				</view>
				<view class="family-area">
					<view style="font-size: 20px;">游戏</view>
					<view class="more" @click="btnMores">更多</view>
				</view>
				<view class="game-area">
					<swiper class="swiper-box2"  :next-margin="'120px'">
						<swiper-item v-for="(item, index) in footers" :key="index" style="width: 200rpx !important;  /* 每个 item 宽度（控制可见的部分） */
						margin-right: 10px;  ">
							<view class="tab-input2">

								<view>
									<img class="imgss" :src="item.img" alt=""
										@click="goGame(item)">
										
									<view class="game-names">
										<view>{{item.name}}</view>
										<view class="game-numer">{{item.strValue}}人在线</view>
									</view>
								</view>

							</view>

						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 底部 -->
	<view class="footer-area">
			<view v-for="(item, index) in listDate" :key="index" class="tab-item"
				:class="{ 'active': currentIndex === index+1 }" @click="btnTab(item.pagePath, index)">
			 <button v-if="index==2"  id="payButton" class="btnPostion flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
			        <i class="fa-brands fa-bitcoin"></i>
			        <span>Pay</span>
			    </button>
		
				<image v-else :src="currentIndex === index+1 ? item.selectedIconPath : item.iconPath" class="tab-icon" />
			</view>
		</view>
		</view>
	
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				active:'',
					userInfo: null,
					username:"",
				notice:"",
				footers:[
					{ img: require('@/static/home/banner1.jpg'),name:'血战麻将' },
					{ img: require('@/static/home/banner2.jpg'),name:'斗地主' },

				],
				tabList:[
					{
						img: require('@/static/home/tab1.png'),
						text:'Game Fi'
					},
					{
						img: require('@/static/home/tab2.png'),
						text:'NFT市场'
					},
					{
						img: require('@/static/home/tab3.png'),
						text:'NFT挖矿'
					},
					{
						img: require('@/static/home/tab4.png'),
						text:'NFT铸造'
					},
					{
						img: require('@/static/home/tab5.png'),
						text:'个人中心'
					},
					{
						img: require('@/static/home/tab6.png'),
						text:'仪表盘'
					}
				],
				gameList: [
					{ img: require('@/static/home/img3.png') }, // 使用@别名或相对路径
						{ img: require('@/static/home/img2.png') },
						{ img: require('@/static/home/img3.png') },
				],
				rankDate: [],
				bannerList: [
					{ img: require('@/static/home/img1.png') }, // 使用@别名或相对路径
						{ img: require('@/static/home/img2.png') },
						{ img: require('@/static/home/img3.png') },
							{ img: require('@/static/home/img4.png') },
				
				],
				currentIndex: 2,
				listDate: [{
						pagePath: "/pages/home/home",
						iconPath: "/static/home/home.png",
						selectedIconPath: "/static/home/homeActive.png",

					},
					{
						pagePath: "/pages/family/family",
						iconPath: "/static/home/family.png",
						selectedIconPath: "/static/home/familyActive.png",
					},
					{pagePath: '/pages/my/myAccount?activeIndex=充值',
						iconPath: "/static/home/add.png",
						selectedIconPath: "/static/home/add.png",
					},
					{
						pagePath: "/pages/ranking/ranking",
						iconPath: "/static/home/ranking.png",
						selectedIconPath: "/static/home/rankingActive.png",
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/home/my.png",
						selectedIconPath: "/static/home/myActive.png",
					},
				]
			}
		},
	
		
		onShow() {
			this.currentIndex=1
		},
		mounted() {
			this.getGameList()
			this.getConfig()
			this.getRank()
			this.getOnline()
			this.getUserInfo()
		},
		methods: {
			//banner
			getOnline() {
				uni.$ice.post('index/online', {}, false).then(res => {
				console.log(res)
			const gameKeyMap = {
			  '血战麻将': 658,
			  '斗地主': 30
			};
			const processedFooters = this.footers.map(item => ({
			  ...item,
			  // 通过映射关系获取对应的str值
			  strValue: res.data[gameKeyMap[item.name]] 
			}));
			this.footers=processedFooters
				}).catch(err => {

				})
			},
			//关闭弹框
			btnClose(){
				this.$refs.popup.close()
			},
			//游戏更多
			btnMores(){
				uni.navigateTo({
					url: '/pages/game/game'
				});
			},
			//点击跳转
			btnList(e){
				if(e.text == 'Game Fi'){
				uni.navigateTo({
					url: '/pages/game/game'
				});
				}else if(e.text == '个人中心'){
					uni.navigateTo({
						url: '/pages/my/my'
					});
				}
				else if(e.text == '仪表盘'){
					this.$refs.popup.close()
				}
				else{
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
				
			},
			open() {
						this.$refs.popup.open('top')
					},
					close() {
						this.$refs.popup.close()
					},
			getRank(){
				uni.$ice.post('user/rank', {type:this.type}, false).then(res => {
					
					this.rank1 = res.data.rank1	
					this.rank2 = res.data.rank2	
					this.rank3 = res.data.rank3	
					this.other = res.data.other	
					this.rankDate=[this.rank1,this.rank2,this.rank3]
					console.log('排行榜',this.rankDate)
				}).catch(err => {
							
				})
			},
			
			toggle() {
				if(this.active == ''){
					this.$refs.popup.open('top')
					this.active = 'active'
				}else{
					
					this.active = ''
						this.$refs.popup.close()
				}
			},
			goGame(item) {
				if(item.name == '血战麻将'){
					location.href='https://gcsq.top/game/xzddmj?cpToken=7c36ae44565d5e17964d120f11d44cf6&account=0x64fb23431a87b34a21881e9648dbc4bb8b464a65'
				}else{
					location.href='https://gcsq.top/game/ddz?cpToken=7c36ae44565d5e17964d120f11d44cf6&account=0x64fb23431a87b34a21881e9648dbc4bb8b464a65'
				}
				
			},
			//banner
			getConfig() {
				uni.$ice.post('index/config', {}, false).then(res => {
				
					this.banners = res.data.banner
					this.notice=res.data.notice
				}).catch(err => {

				})
			},
			//报错
				getUserInfo() {
							let tmp = uni.getStorageSync('userInfo')
							this.username=''
							if (tmp) {
								this.userInfo = JSON.parse(tmp)
								const username=this.userInfo.username
								this.username=  `${username.slice(0, 4)}...${username.slice(-6)}`;
								console.log(this.username)
								return 
							}
							uni.$ice.post('user/index', {}, false).then(res => {
								uni.setStorageSync('userInfo', JSON.stringify(res.data));
								this.userInfo = res.data
								const username=this.userInfo.username
								this.username=  `${username.slice(0, 4)}...${username.slice(-6)}`;
								if (this.userInfo.username != uni.$ice.walletAddress) {
									uni.removeStorageSync("token")
									location.reload();
								}
								uni.stopPullDownRefresh()
			
							}).catch(err => {
			
							})
						},
			getGameList() {
				uni.$ice.post('user/game', {}, false).then(res => {

					this.gameList = res.data.list;
				}).catch(err => {})
			},

			//排行榜
			btnMore() {
				uni.navigateTo({
					url: '/pages/ranking/ranking'
				})
			},

			btnTab(path, index) {
				this.currentIndex = index+1
				uni.navigateTo({
					url: path
				})
			}

		}
	}
</script>

<style scoped>
	.imgss{
		width: 100%;
		height: 151px;
		    border-top-left-radius: 10px;
		    border-top-right-radius: 10px;
	}
	.tba-name{
	   position: relative;
	   font-size: 27px;
	   left: 12px;
	   top: -5px;
		  
	}
	.tab-list{
		width: 100%;
		height: 80rpx;
		
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.tab-lists{
		margin-top:200rpx;
	}
	.header-name{
		display: inline-block;
		margin-left:18rpx;
		font-size: 24rpx;
	}
	.content-header{
		    display: flex;
		    padding-top: 46rpx;
		    justify-content: space-between;
	}
	.contens{
		width: 87%;
		margin: 0 auto;
	}
	.content-popup{
		width: 100%;
		height: 100vh;
		background-color: rgba(17, 21, 39, 0.8);
	}
	
	.game-numer {
		font-size: 26rpx;
		color: rgb(185, 185, 185);
		position: relative;
		top: 4px;
	}
.uni-noticebar{
	border-radius: 35px;
 background: linear-gradient(180deg, rgb(27, 88, 249) 19.847%, rgb(89, 133, 248)) !important;
}
	.game-names {
		display: flex;
		justify-content: space-around;
	}
.white-notice {
  color: white !important;
}
.white-notice ::v-deep .uni-notice-bar-icon {
  color: white !important;
}
	.game-area {

		margin-top: 24rpx;
	}

	.tab-number {
		font-size: 22px;
		position: relative;
		top: 24rpx;
	}

	.swiper-box2 {
		width: 100%;
		height: 192px;
		margin-top: 30rpx;
	}

	.input-img {
		width: 30%;
		border-radius: 50%;
		margin-left: 12px;
		height: 100rpx;
	}

	.tab-input {
		display: flex;
		border: 1px solid;
		margin-left: 12px;
		border-radius: 8px;
		padding-left: 11px;
		padding: 10px
	}

	.tab-input2 {
		width: 90%;
		border-radius: 20rpx;
		background-color: #212437;
		padding-bottom: 32rpx;
		text-align: center;
	}

	.tab-area {
		width: 100%;
		height: 160rpx;
	}

	.more {
		font-size: 26rpx;
		color: rgb(185, 185, 185);
		position: relative;
		top: 18rpx;
	}

	.family-area {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.swiper-box {
		margin-top: 36rpx;
		    height: 172px;
	}

	.banner-img {
		width: 100%;
		height: 180px;
		border-radius: 10px;
	}

	.imgs {
		position: relative;
		top: 3px;
	}

	.title-area {
		display: flex;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 30px;
		padding-left: 26rpx;
		background: linear-gradient(180deg, rgb(27, 88, 249) 19.847%, rgb(89, 133, 248)) !important
	}

	.content {
		width: 84%;
		margin: 0 auto;
	}

	.tab-item:nth-child(3) .tab-icon {
		/* 选中第三个 Tab（中间的 add 图标） */
		width: 80px !important;
		/* 放大宽度 */
		height: 80px !important;
		/* 放大高度 */
		position: relative;
		top: -84rpx;
	}

	.footer-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 62px;
		/* line-height: 86px; */
		padding-top: 26px;
		display: flex;
		background-color: #212437;
		color: red;
		justify-content: space-around;
		    padding-left: 16px;
		    padding-right: 16px
	}

	.fullscreen-bg {
		position: fixed;
		/* 关键：固定定位 */
		top: 0;
		left: 0;
		width: 100vw;
		/* 100%视窗宽度 */
		height: 100vh;
		/* 100%视窗高度 */
		background-image: url('@/static/banner.png');
		/* 替换为你的图片路径 */
		background-size: cover;
		/* 图片拉伸填满容器 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 禁止重复 */
	}

	.title {
		color: white;
		font-size: 24px;
		position: relative;
		/* 需要设置定位（relative/absolute） */
		z-index: 1;
		/* 确保文字在背景图上方 */
	}

	.tab-icon {

		width: 30px;
		height: 30px;

	}

	.user-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-top text {
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 20px;
		font-weight: 700;
		line-height: 28px;

	}
	.hamburger {
	  cursor: pointer;
	  position: relative;
	  z-index: 99999;
	}
	
	.hamburger view {
	  display: none;
	}
	
	.hamburger svg {
	  /* The size of the SVG defines the overall size */
	  height: 3em;
	  /* Define the transition for transforming the SVG */
	  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.line {
	  fill: none;
	  stroke: white;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-width: 3;
	  /* Define the transition for transforming the Stroke */
	  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.line-top-bottom {
	  stroke-dasharray: 12 63;
	}
	
	.hamburger view.active + svg {
	  transform: rotate(-45deg);
	}
	
	.hamburger view.active + svg .line-top-bottom {
	  stroke-dasharray: 20 300;
	  stroke-dashoffset: -32.42;
	}

</style>